<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<html>
<head>
<title>渠道汇总</title>
<script type="text/javascript" src="/admin/js/Chart.js" charset="UTF-8"></script>
<script language="javascript" type="text/javascript">
function submitForm(){
	$("#dateRange").val($("#year").val() + "-" + $("#month").val());
	$("#form1").submit();
}

var colorArr = ['green','blue','gray','yellow','black','purple','GreenYellow','HotPink','LawnGreen','LightBlue','LightSeaGreen','saddlebrown'];
function showPie(){

	var pieData1 = [
					
					<c:forEach var="c1" items="${chart1}" varStatus="vs">
					<c:if test="${c1.channelId != 1}">
					{
						value : ${c1.ratio},
						color : colorArr[${(c1.channelId - 1) < 0 ? (c1.channelId - 1) + 12 : (c1.channelId - 1)}]
					}
					<c:if test="${vs.count != chart1.size()}">
					,
					</c:if>
					</c:if>
					</c:forEach>
				];
	var pieData2 = [
					<c:forEach var="c2" items="${chart2}" varStatus="vs">
					<c:if test="${c2.channelId != 1}">
					{
						value : ${c2.ratio},
						color : colorArr[${(c2.channelId - 1) < 0 ? (c2.channelId - 1) + 12 : (c2.channelId - 1)}]
					}
					<c:if test="${vs.count != chart2.size()}">
					,
					</c:if>
					</c:if>
					</c:forEach>
				];
	
	new Chart(document.getElementById("pie1").getContext("2d")).Pie(pieData1);
	new Chart(document.getElementById("pie2").getContext("2d")).Pie(pieData2);
}

function loadDesc(){
	$(".colorShow").each(function(i){
			var elem = $(this);
			var index = (elem.attr("id").split("_")[1]) - 1;
			index = index < 0 ? index + 12 : index;
			var thisColor = colorArr[index];
			elem.css({'background-color' : thisColor});
		});
}

$(document).ready(function(){
	showPie();
	loadDesc();
	$("#year").val("${thisYear}");
	$("#month").val("${thisMonth}");
});
</script>
</head>
<body>
<jsp:include page="_headChannel.jsp"></jsp:include>
<form  class="form-inline" id="form1" name="form1" method="post" action="">
时间选择：     <select id="year">
		<option value="2010">2010</option>
		<option value="2011">2011</option>
		<option value=2012>2012</option>
		<option value="2013">2013</option>
		<option value="2014">2014</option>
		<option value="2015">2015</option>
		<option value="2016">2016</option>
		<option value="2017">2017</option>
		<option value="2018">2018</option>
		<option value="2019">2019</option>
		<option value="2020">2020</option>
		</select>&nbsp;年&nbsp;
		<select id="month">
		<option value="01">1</option>
		<option value="02">2</option>
		<option value="03">3</option>
		<option value="04">4</option>
		<option value="05">5</option>
		<option value="06">6</option>
		<option value="07">7</option>
		<option value="08">8</option>
		<option value="09">9</option>
		<option value="10">10</option>
		<option value="11">11</option>
		<option value="12">12</option>
		</select>&nbsp;月&nbsp;
		<input type="hidden" value="" id="dateRange" name="dateRange"/>
		<button type="button" class="btn" id="button" onclick="submitForm()">查询</button>
</form>

<table>
<tbody>
	<tr>
		<td>
		点击次数：
		</td>
		<td>
		注册人数：
		</td>
	</tr>
	<tr>
		<td >
		<c:forEach var="c1" items="${chart1}">
		<c:if test="${c1.channelId != 1}">
		<span id="color1_${c1.channelId}" class="colorShow" style="display: inline-block;height : 18px">*</span>
		<span id="desc1_${c1.channelId}" class="">${channelMap.get(c1.channelId) }</span><br/>
		</c:if>
		</c:forEach>
		</td>
		<td >
		<c:forEach var="c2" items="${chart2}">
		<c:if test="${c2.channelId != 1}">
		<span id="color2_${c2.channelId}" class="colorShow" style="display: inline-block;height : 18px">*</span>
		<span id="desc1_${c2.channelId}" class="">${channelMap.get(c2.channelId) }</span><br/>
		</c:if>
		</c:forEach>
		</td>
	</tr>
	<tr>
		<td >
		<canvas id="pie1" height="300" width="200"></canvas>
		</td>
		<td >
		<canvas id="pie2" height="300" width="200"></canvas>
		</td>
	</tr>
</tbody>
</table>

<div>${thisYear}${thisYear > 0? '年' : ''}${thisMonth}${thisMonth > 0? '月份' : ''}渠道总汇：</div>
<table id="tableId_" class="table table-bordered">
	<thead>
		<tr>
		<td>渠道名称</td> 
		<td>点击次数</td> 
		<td>注册人数</td> 
		<td>创角色</td> 
		<td>充值人数</td> 
		<td>充值金额(￥)</td> 
		</tr>
	</thead>
	<tbody id="channel_body_id">
		<c:forEach var="data" items="${sumData}">
		<c:if test="${data.get('channelId') != 1}">
		<tr>
			<td >${channelMap.get(data.get('channelId')) }</td>
			<td >${data.get('visitTimes')}</td>
			<td >${data.get('registerNum')}</td>
			<td >${data.get('roles')}</td>
			<td >${data.get('chargeNum')}</td>
			<td >${data.get('gold')}</td>
		</tr>
		</c:if>
		</c:forEach>
	</tbody>
</table>

</body>
</html>
 